<template>
  <basic-dialog
    width="40%"
    title="选择修改信息模板"
    :visible="visible"
    :showFooter="false"
    :handleClose="handleCancel"
  >
    <div>
      <el-radio-group v-model="radioGroup.value">
        <el-radio
          v-for="item in radioGroup.options"
          :key="item.value"
          :label="item.value"
        >{{ item.label }}
        </el-radio>
      </el-radio-group>
      <div class="footer-wrap" slot="ft">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </div>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import { EDIT_RADIO_GROUP_OPTIONS, EDIT_RADIO_GROUP_VALUES, PageNameMaps } from './constants';
export default {
  components: { BasicDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      radioGroup: {
        options: EDIT_RADIO_GROUP_OPTIONS,
        value: EDIT_RADIO_GROUP_VALUES.BasicInfo
      }
    }
  },
  methods: {
    // 确定
    handleConfirm () {
      this.$emit('getPageName', PageNameMaps[this.radioGroup.value] ?? '')
      this.handleCancel()
    },
    // 取消
    handleCancel () {
      this.radioGroup.value = EDIT_RADIO_GROUP_VALUES.BasicInfo
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-radio-group {
  text-align: center;
  .el-radio {
    width: 100%;
    &:not(:first-child) {
      margin-top: 20px;
    }
  }
}
.footer-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
